<template>
	<view class="page-index">
		<!-- 获取手机号码只能通过组件来调取，没有响应的API -->
		
		
		<view class="header">

			<!-- 搜索栏 -->
			<view class="search">
				<u-search
					v-model="keyword"
					placeholder="请输入关键词"
					@blur="onSearch"
				></u-search>
			</view>
			<!-- 轮播图 -->
			<view class="banner">
				<u-swiper
					v-model="selectIndex"
					:list="swiperList"
					height="348rpx"
					bgColor="none"
					indicator-dots
					autoplay
				></u-swiper>
			</view>
		</view>
		<!-- 列表 -->
		<view class="content" style="margin-top: 5rpx;">
			<u-tabs
				:list="list"
				lineWidth="30"
				lineColor="#f56c6c"
				:activeStyle="{
					color: '#303133',
					fontWeight: 'bold',
					transform: 'scale(1.05)'
				}"
				:inactiveStyle="{
					color: '#606266',
					transform: 'scale(1)'
				}"
				itemStyle="padding-left: 10px; padding-right: 10px; height: 34px;"
				:swipeable="true"
				@change="toChange"
			>
			</u-tabs>
			<!-- <button class="btn" open-type="getPhoneNumber" @getphonenumber="toBuy">下单</button> -->
			
			
			
			
			<!-- <view class="list">
				
				<u-empty v-if="total==0" text="所谓伊人，在水一方" mode="data"></u-empty>
				<view v-if="courseList">
					<view
						class="subject"
						@click="handleDetail(item)"
						v-for="(item, index) in courseList"
						:key="index"
					>
						<u-image :src="item.img" width="280rpx" height="80px" ></u-image>
						
						<view class="detail">
							<u-text
								:size="14"
								:text="item.title"
								color="#303030"
								:ellipsis="2"
							></u-text>
							<view style="margin-top: 4px;">
								<u-text
									:size="12"
									:text="item.tags"
									color="#C5C5C5"
								></u-text>
							</view>
							<view style="display: flex;justify-content: flex-start;margin-top: 8px;">
								<text style="font-size:14px;">单价:</text>
								<u-text :size="14":text="'￥'+item.realprice"color="#FF724E"></u-text>
							</view>
						</view>
					</view>
				</view>
			</view> -->
			
		</view>
		
		<u-empty v-if="total==0" text="所谓伊人，在水一方" mode="data"></u-empty>
		<pug-course-list2 v-if="isList" :dataList="courseList"></pug-course-list2>
		<pug-course-list v-else :dataList="courseList"></pug-course-list>
		<view class="pug-style-box" v-show="isshow" @click="isList=!isList">
			<text v-if="isList" class="iconfont icon-shuanglieliebiao"></text>
			<text v-else class="iconfont icon-liebiao"></text>
		</view>
	</view>
</template>

<script>
import debounce from '@/utils/debounce.js'	
	
export default {
	data() {
		return {
			selectIndex: 0,
			swiperList: [
				{ url:'/static/images/index/banner1.png'},
				{ url:'/static/images/index/banner1.png'},
				{ url:'/static/images/index/banner1.png'},
			],
			courseList: [],
			pageNo: 1,
			// 配置了请求合并之后，这里就变成了刷新时候，每次加载3个
			pageSize: 3,
			cid: "",
			total: 0,
			// 页数
			pages: 0,
			keyword: "",
			active: 0,
			list: [],
			isList: false,
			isshow: false
		};
	},
	onLoad(){
		// 执行查询分类
		// this.loadCategories()
		// 执行查询课程
		// this.loadCourse()
		// 后端的请求合并
		this.loadIndex()
	},
	
	// 如果考虑到分页的实时性，就写到onShow当中
	onShow(){
		this.$getUserInfo().then(resData=>{
			if(resData.user.forbbiden == 1){
				this.$toast("您已经被管理员禁止了...")
				// 这里肯定是跳转一个页面
				return 
			}
		})
	},
	onPageScroll(e){
		if(e.scrollTop >= 100){
			this.isshow = true
		}else{
			this.isshow = false
		}
	},
	// 滚动分页
	onReachBottom(){
		// 如果已经全部加载完，就不用在去执行加载方法了
		if(this.pages > 0 && this.pageNo > this.pages){
			return
		}
		// 这里会出现闪烁问题，会重复加载多次（使用防抖、节流来解决）
		debounce(this.loadCourse,500)
	},
	// 下拉刷新
	onPullDownRefresh(){
		// 节流
		debounce(this.loadCourse().then(res=>{
			this.loadCategories().then(res=>{
				uni.stopPullDownRefresh()
			});
		}),500)
	},
	methods: {
		// 后端的请求合并
		async loadIndex(){
			const resData = await this.$request.post(this.$api.findCategoriesIndex)
			const {categories:categoriesObj,coursePage:coursePageObj} = resData
			// 渲染分类
			this.list = categoriesObj.categories.map((cate,index)=>{
				return {name: cate.title,index,id: cate.id}
			})
			this.list.unshift({name:"全部",value:"",id:""})
			
			// 渲染课程
			let {records,total,pages} = coursePageObj.coursePage
			// 拼接
			this.courseList = this.courseList.concat(records)
			this.total = total
			this.pages = pages// 1
			// 这样可以看作成是一种懒加载(提前到达下一页)
			this.pageNo = this.pageNo + 1// 2
		},
		// 查询课程
		async loadCourse(){
	
			if(this.pages > 0 && this.pageNo > this.pages){
				console.log("pages",pages)
				console.log("pageNo",pageNo)
				this.$toast("已经全部加载完了呢~")
				return
			}
			let params = {pageNo: this.pageNo,pageSize: this.pageSize,cid: this.cid,keyword: this.keyword}
			const resData = await this.$request.post(this.$api.findCoursePage,params)
			console.log("课程：",resData)
			let {records,total,pages} = resData.coursePage
			// 拼接
			this.courseList = this.courseList.concat(records)
			this.total = total
			this.pages = pages// 1
			// 这样可以看作成是一种懒加载(提前到达下一页)
			this.pageNo = this.pageNo + 1// 2
			
		},
		
		// 查询分类
		async loadCategories(){
			const resData = await this.$request.post(this.$api.findCategories)
			console.log("全部分类：",resData)
			this.list = resData.categories.map((cate,index)=>{
				return {name: cate.title,index,id: cate.id}
			})
			this.list.unshift({name:"全部",value:"",id:""})
		},
		// 获取用户手机号
		async toBuy(e){
			const {code} = e.detail;
			const resData = await this.$request.post(this.$api.updateUserTel,{code});
		},
		
		addSuccessCallback(){
			console.log("添加成功的回调.....")
		},
		// 改变分类时候进行id的赋值给cid
		toChange(item) {
			this.pageNo = 1
			this.pageSize = 10
			this.total = 0
			this.courseList = []
			this.cid = item.id
			this.loadCourse()
		},
		// 搜索
		onSearch(item){
			this.pageNo = 1
			this.pageSize = 10
			this.total = 0
			this.courseList = []
			this.keyword = item
			this.loadCourse()
		},
		handleDetail(item){
			uni.navigateTo({
				url: `/pages/coursedetail/coursedetail?courseId=${item.id}`
			})
		}
	},
};
</script>

<style lang="scss">


.u-tabs{
	align-items: center !important;
}
.search{
	padding:0 30rpx;
}

.u-search {
  background-color: transparent!important;
  /* #ifdef MP-WEIXIN */
  width: 75%;
  /* #endif */
  padding-top: 44px;
}

.page-index {
	.header {
		padding-bottom: 16rpx;
		background: linear-gradient(180deg, #618cfc 0%, #f5f5f5 100%);
		.banner {
			margin: 0 auto;
			margin-top: 25rpx;
			width: 696rpx;
			height: 348rpx;
		}
	}
	.content {
		margin-top: 15rpx;
		background: #ffffff;
		.title {
			height: 78rpx;
		}
		.list {
			display: flex;
			flex-direction: column;
			.subject {
				margin: 0 auto;
				display: flex;
				// justify-content: space-between;
				align-items: center;
				height: 252rpx;
				width: 696rpx;
				border-bottom: 2px solid #f5f5f5;
				.detail {
					margin-left: 30rpx;
				}
			}
		}
	}
}
.pug-style-box{
	position: fixed;
	right: 20px;
	bottom: 30px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	text-align: center;
	line-height: 40px;
	background: rgba(0,0,0,0.1);
	.iconfont{
		font-size: 18px;
		color: #999;
	}
}
</style>
